<template>
	<scroll-view scroll-y class="scroll-container">
		<view class="page-bg">
			<view class="card">
				<text class="section-title">城市风光</text>
				<swiper class="top-swiper" indicator-dots autoplay interval="3000" duration="500" circular>
					<swiper-item>
						<image class="swiper-img" src="/static/city5.jpg" mode="widthFix"></image>
					</swiper-item>
					<swiper-item>
						<image class="swiper-img" src="/static/city2.jpg" mode="widthFix"></image>
					</swiper-item>
					<swiper-item>
						<image class="swiper-img" src="/static/city3.jpg" mode="widthFix"></image>
					</swiper-item>
				</swiper>
			</view>


			<view class="card">
				<text class="section-title">城市介绍</text>
				<rich-text class="rich-text" :nodes="cityIntro"></rich-text>
			</view>


			<view class="card">
				<text class="section-title">探索进度</text>
				<text class="progress">当前进度：60%</text>
				<progress :percent="60" show-info stroke-width="12"></progress>
			</view>


			<view class="card">
				<text class="section-title">选择城市</text>
				<picker mode="region" @change="onCityChange" :value="selectedCity">
					<view class="picker-content">
						当前选择：{{ selectedCity[0] }}-{{ selectedCity[1] }}-{{ selectedCity[2] }}
					</view>
				</picker>
			</view>



			<view class="card">
				<text class="section-title">泉州宣传</text>
				<video class="city-video" :src="videoUrl" controls poster="/static/video-poster.jpg"></video>

				  <view class="music-section">
				    <text class="music-title">泉州背景音乐</text>
				    <button class="play-btn" @click="playMusic">播放</button>
				    <text class="music-desc">泉州南音 - 泉州传统乐曲</text>
				    <slider style="width: 500rpx;"></slider>
				  </view>
			</view>
			

			<view class="card">
				<text class="section-title">偏好设置</text>
			
				<view class="preference-item">
					<text>出行方式</text>
					<radio-group @change="onTravelModeChange">
						<label>
							<radio :value="1" :checked="travelMode === 1">公交</radio>
						</label>
						<label>
							<radio :value="2" :checked="travelMode === 2">自驾</radio>
						</label>
						<label>
							<radio :value="3" :checked="travelMode === 3">步行</radio>
						</label>
					</radio-group>
				</view>
			
				<view class="preference-item">
					<text>显示推荐景点:</text>
					<switch v-model="showRecommend"></switch>
				</view>
			
				<view class="preference-item">
					<text>探索半径: {{ searchRadius }}km</text>
					<slider v-model="searchRadius" min="1" max="50" style="width: 300rpx; active-color: #007aff;"></slider>
				</view>
			</view>
		</view>
	</scroll-view>
</template>
<script>
	export default {
		data() {
			return {
				cityIntro: `<p style="color: #333; font-weight: bold; margin-bottom:25px">海上丝绸之路起点 - 泉州</p>
	                  <p style="margin-bottom:20px;"><span style="font-weight: bold;">历史文化：</span>泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路的起点，宋元时期被誉为“东方第一大港”。</p>
	                  <p style="margin-bottom:20px;"><span style="font-weight: bold;">著名景点：</span>清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等</span></p>
					  <p style="margin-bottom:20px;"><span style="font-weight: bold;">特色文化：</span>拥有<span style="color:blue;">南音</span>、<span style="color:blue;">木偶戏</span>和<span style="color:blue;">闽南建筑</span>等丰富的非物质文化遗产</p>`,

				selectedCity: ['福建省', '泉州市', '丰泽区'],


				travelMode: 1, 
				showRecommend: true,
				searchRadius: 10,


				videoUrl: '/static/city-video.mp4',
				musicUrl: '/static/city-music.mp3'
			};
		},
		methods: {
			onCityChange(e) {
				this.selectedCity = e.detail.value;
				uni.showToast({
					title: `已选择：${this.selectedCity.join('-')}`,
					icon: 'none'
				});
			},
			onTravelModeChange(e) {
				this.travelMode = parseInt(e.detail.value);
				const modes = ['公交', '自驾', '步行'];
				uni.showToast({
					title: `选择出行方式：${modes[this.travelMode - 1]}`,
					icon: 'none'
				});
			},
			 playMusic() {
			      // 创建音频上下文并播放音乐
			      const innerAudioContext = uni.createInnerAudioContext();
			      innerAudioContext.src = this.musicUrl;
			      innerAudioContext.play();
			      // 可以添加音频播放相关的其他逻辑，如监听播放结束等
			      innerAudioContext.onEnded(() => {
			        console.log('音乐播放结束');
			      });
			    }
		}
	};
</script>

<style>
	.scroll-container {
		height: 100vh;
	}

	.page-bg {
		background-color: #f0f0f0;
		padding: 15rpx;
	}

	.card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
		display: block;
		color: #333;
	}

	.top-swiper {
		width: 100%;
		height: 400rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	rich-text {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #666;
	}
	.progress{
		display: block;
		color:#666;
		margin-bottom: 20rpx;
	}
	progress {
		width: 100%;
		margin-top: 10rpx;
	}

	.picker-content {
		padding: 15rpx 0;
		font-size: 28rpx;
		color: #666;
	}

	.preference-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		padding: 10rpx 0;
		border-bottom: 1px solid #f5f5f5;
		height: 100rpx;
	}
	.preference-item radio{
		margin: 0 10rpx;
	}


	.city-video {
		width: 100%;
		height: 400rpx;
		border-radius: 8rpx;
	}
	.music-section {
	  height: 300rpx;
	  background-color: #f5f5f5;
	  margin-top: 10px;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
	.music-title {
	  margin-right: 200px;
	  font-size: 16px;
	  font-weight: bold;
	  margin-bottom: 5px;
	}
	.play-btn {
	  width: 150rpx;
	  height: 100rpx;
	  line-height: 100rpx;
	  text-align: center;
	  background-color: #007AFF;
	  color: #fff;
	  border-radius: 5px;
	  margin-bottom: 10px;
	}
	.music-desc {
	  font-size: 14px;
	  color: #666;
	  margin-bottom: 5px;
	}
</style>
